<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
      <template slot="date">
        <el-form-item>
          <SearchDatePicker
            :start.sync="form.startTime"
            :end.sync="form.endTime"
          />
        </el-form-item>
      </template>
    </TableSearch>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import formatter from '@/utils/format'
import { userList, exportUser } from '@/api/user'
export default {
  name: 'AppUserList',
  components: { TableSearch },
  mounted() {},
  data() {
    return {
      loading: false,
      tableBtns: [
        {
          label: '导出',
          isExport: true,
          startDownload: (callback) => {
            exportUser({
              ...this.form,
              pageSize: 10,
              currentPage: 1,
            })
              .then((res) => {
                callback(res)
              })
              .catch((err) => {
                console.log(err)
              })
          },
          resourceId: '/web/user-management/user-management/导出',
        },
      ],
      columns: [
        {
          label: '用户ID',
          prop: 'id',
          resourceId: '/web/user-management/user-management/用户ID',
        },
        {
          label: '用户名',
          prop: 'name',
          resourceId: '/web/user-management/user-management/用户名',
        },
        {
          label: '手机号',
          prop: 'mobile',
          resourceId: '/web/user-management/user-management/手机号',
        },
        {
          label: '注册时间',
          formatter,
          prop: 'createTime',
          resourceId: '/web/user-management/user-management/注册时间',
        },
        {
          label: '充电次数',
          prop: 'chargeNum',
          resourceId: '/web/user-management/user-management/充电次数',
        },
        {
          label: '当前状态',
          formatter,
          prop: 'userStatus',
          resourceId: '/web/user-management/user-management/当前状态',
        },
        {
          label: '充电端口',
          formatter: (item) => {
            return item.requirementIds || '/'
          },
          prop: 'requirementIds',
          resourceId: '/web/user-management/user-management/充电端口',
        },
        {
          label: '有无套餐',
          formatter: (item) => {
            if (item.monthlyUser) {
              return '有'
            }
            return '无'
          },
          prop: 'monthlyUser',
          resourceId: '/web/user-management/user-management/有无套餐',
        },
        {
          label: '账户余额',
          prop: 'balance',
          resouceId: '/web/user-management/user-management/账户余额',
        },
        // {
        //   label: '操作',
        //   resourceId: '/web/user-management/user-management/操作',
        //   buttons: [
        //     {
        //       label: '详情',  //详情功能重构之后未规划
        //       resourceId: '/web/user-management/user-management/套餐详情',
        //       click: (item) => {
        //         this.$router.push(`/user/userDetail/${item.id}`)
        //       },
        //     },
        //   ],
        // },
      ],
      searchPath: '/web/user-management/user-management/查询',
      tableData: {},
      form: {},
      formItemsInline: [
        {
          type: 'text',
          value: 'name',
          placeholder: '用户名',
          clearable: true,
          resourceId: '/web/user-management/user-management/用户名',
        },
        {
          type: 'text',
          value: 'mobile',
          placeholder: '手机号',
          clearable: true,
          resourceId: '/web/user-management/user-management/手机号',
        },
        {
          slot: 'date',
        },
      ],
    }
  },
  methods: {
    // submit(form) {},
    handleOpenDesc() {
      // console.log(
      //   this.$store.getters.resourceSet.filter((item) => {
      //     return item.match('/web/user-management/user-management/') != null
      //   })
      // )
      console.log(this.$store.getters.resourceSet)
    },
    handleTableData(params) {
      this.loading = true
      userList(params)
        .then((res) => {
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {
      this.form = {}
    },
  },
}
</script>
